<template>
  <div class="space">
    <div class="space-container">
      <div class="space-label form-label space-name">区 间 名</div>
      <div class="space-input space-name">
        <input class="row-right" type="text" v-model="spaceName" />
      </div>
      &nbsp;
      <div class="space-button space-name">
        <input class="row-right" type="button" @click="search" value="查询" />
      </div>
      <div class="space-list">
        <p v-for="item in spaceList" :key="item.pk">
          {{ item.fields.space_name }}
          &nbsp;
          <input type="button" @click="join(item.pk)" value="加入" />
        </p>
      </div>
      <div class="space-label form-label space-size">最 大 人 数</div>
      <div class="space-input space-size">
        <select class="row-right" v-model="size">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select>
      </div>
      <div class="space-button space-size">
        <input class="row-right" type="button" @click="create" value="创建" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Space",
  props: {
    me: String,
    space: String,
    spaceId: String,
    inLine: Boolean,
  },
  data() {
    return {
      size: 5,
      spaceList: [],
    };
  },
  methods: {
    //查询区间的方法
    search() {
      this.axios
        .get(
          "http://" +
            window.location.hostname +
            ":14000/cola/space_search/" +
            this.spaceName +
            "/"
        )
        .then((res) => {
          let result = res.data;
          console.log(result);
          if (result.code == 0) {
            this.spaceList = result.data;
          } else {
            console.log(result.msg);
          }
        });
    },
    create() {
      this.axios
        .get(
          "http://" +
            window.location.hostname +
            ":14000/cola/space_create/" +
            this.spaceName +
            "/" +
            this.me +
            "/" +
            this.size +
            "/"
        )
        .then((res) => {
          let result = res.data;
          console.log(result);
          if (result.code == 0) {
            this.$emit("update:space", this.spaceName);
            this.$emit("update:inLine", true);
            this.$emit("update:spaceId", result.data);
          } else {
            console.log(result.msg);
            alert(result.msg);
          }
        });
    },
    join(id) {
      this.$emit("update:spaceId", id);
      this.axios
        .get(
          "http://" +
            window.location.hostname +
            ":14000/cola/space_join/" +
            id +
            "/" +
            this.me +
            "/"
        )
        .then((res) => {
          let result = res.data;
          console.log(result);
          if (result.code == 0) {
            this.$emit("update:space", this.spaceName);
            this.$emit("update:inLine", true);
          } else {
            console.log(result.msg);
          }
        });
    },
  },
};
</script>

<style scoped lang="scss">
.space {
  height: 100%;
  width: 100%;
}

.form-label {
  width: 30%;
  min-width: 80px;
  height: 30px;
  text-align: justify;
}

.form-label:after {
  content: "";
  display: inline-block;
  width: 100%;
}

.space-container {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-flow: row dense;
}

.space-item {
  font-size: 4em;
  text-align: center;
  border: 1px solid #e5e4e9;
}

.space-label {
  grid-column-start: 3;
  grid-column-end: 4;
}

.space-input {
  grid-column-start: 5;
  grid-column-end: 8;
}

.space-button {
  grid-column-start: 9;
  grid-column-end: 10;
}

.space-name {
  grid-row-start: 3;
  grid-row-end: 4;
}

.space-size {
  grid-row-start: 9;
  grid-row-end: 10;
}

.space-list {
  grid-column-start: 3;
  grid-column-end: 10;
  grid-row-start: 5;
  grid-row-end: 8;
}

.space-input input,select {
  width: 100%;
}

.space-button input {
  width: 100%;
}

</style>
